<template>
	<view>
		<view class="sched-list">
			<view v-if="list.length!=0">
				<view class="" v-for="item in list">
					<view class="item">
						<view class="title title-ct">
							{{item.className}}
						</view>
						<view v-if="item.status==2" @click="handSta(item)" class="btn" :style="{color:'#0050A5'}">
							立即学习
						</view>
						<view class="btn0 btn" v-if="item.status==0">未解锁</view>
						<view class="btn1 btn" @click="handSta(item)" v-if="item.status==1">点击解锁</view>
						<view class="btn3 btn" @click="handSta(item)" v-if="item.status==3">学习已完成</view>
					</view>
					<bs-line borderStyle='dashed'></bs-line>
				</view>
			</view>
			<u-empty margin-top='20' font-size='24' icon-size='80' :show='list.length==0' :text="'暂无学习进度'"></u-empty>
			<view class="title-ct mb-10 mt-30">
				学习说明
			</view>
			<view class="content-text">
				1.开启学习后，可以开始学习。<br />
				2.上一节课程学完成后，下一节课才可解锁。<br />
				3.所有课程均学完成后，可申请结业证书。<br />
				4.结业证书包含电子版和纸制版。电子版可在网站查询，纸制版将邮寄至预留地址。
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			handSta(item) {
				this.$emit('handStudy', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sched-list {
		.item {
			padding: 30rpx 0;
			@include my-flex($jc: $bs-sb, $ai:center);

			.btn0 {
				color: #999999;
				font-size: 14px;
			}

			.btn1 {
				color: #0050a5;
				font-size: 14px;
			}

			.btn2 {
				color: #0050a5;
				font-size: 14px;
			}

			.btn3 {
				color: #0050a5;
				font-size: 14px;
			}
		}

		.content-text {
			line-height: 46rpx;
		}
	}
</style>
